<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>

<html>
	<head>
		<title>山西海宁皮革城</title>
		<%@ include file="/commons/meta.jsp"%>
		<script type="text/javascript">
		// 更新进度条
		var idArray = new Array("#userid","#username","#password2","#passwordConfirm2","#mobile2","#email2","#department");
		var progressFlagArray = new Array("false","false","false","false","false","false","false");
		var progress = 30;
		
		$(document).ready(function(){
			
			/* setup navigation, content boxes, etc... */
			Administry.setup();
			
			/* progress bar animations - setting initial values */
			Administry.progress("#add_user_progress", progress, 100);
			
			
			// validate form on keyup and submit
			var validator = $("#addUserForm").validate({
				rules: {
					"userid": {
						required: true,
						minlength: 5
					},
					"username": {
						required: true,
					},
					"userDetail.email": {
						email: true
					},
					"userDetail.title": {
						required: true
					},
					"password": {
						required: true,
						minlength: 5
					},
					"passwordConfirm": {
						required: true,
						minlength: 5,
						equalTo: "#password2"
					}
				},
				messages: {
					"userid": {
						required: "请输入账号",
						minlength: jQuery.format("最少输入{0}个字符")
					},
					"username": {
						required: "请输入用户名",
					},
					"userDetail.email": {
						email:"请输入合法邮箱"
					},
					"userDetail.title": {
						required:"请输入部门"
					},
					"password": {
						required: "请输入新密码",
						minlength: jQuery.format("最少输入{0}个字符")
					},
					"passwordConfirm": {
						required: "请输入确认新密码",
						minlength: jQuery.format("最少输入{0}个字符"),
						equalTo: "两次输入的密码不一致"
					}
					
				},
				// the errorPlacement has to take the layout into account
				errorPlacement: function(error, element) {
					error.insertAfter(element.parent().find('label:first'));
				},
				// specifying a submitHandler prevents the default submit, good for the demo
				//submitHandler: function() {
				//	alert("Data submitted!");
				//},
				// set new class to error-labels to indicate valid fields
				success: function(label) {
					// set &nbsp; as text for IE
					label.html("&nbsp;").addClass("ok");
				}
			});								
			
			
				$("#userid").blur(function() {
					var obj = $("#userid");
					if(obj.val() !=""){
						if(progressFlagArray[0] != true){
							progress += 10;
							progressFlagArray[0] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[0] == true){
							progress -= 10;
							progressFlagArray[0] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#username2").blur(function() {
					var obj = $("#username2");
					if(obj.val() !=""){
						if(progressFlagArray[1] != true){
							progress += 10;
							progressFlagArray[1] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[1] == true){
							progress -= 10;
							progressFlagArray[1] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#password2").blur(function() {
					var obj = $("#password2");
					if(obj.val() !=""){
						if(progressFlagArray[2] != true){
							progress += 10;
							progressFlagArray[2] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[2] == true){
							progress -= 10;
							progressFlagArray[2] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#passwordConfirm2").blur(function() {
					var obj = $("#passwordConfirm2");
					if(obj.val() !=""){
						if(progressFlagArray[3] != true){
							progress += 10;
							progressFlagArray[3] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[3] == true){
							progress -= 10;
							progressFlagArray[3] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#mobile2").blur(function() {
					var obj = $("#mobile2");
					if(obj.val() !=""){
						if(progressFlagArray[4] != true){
							progress += 10;
							progressFlagArray[4] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[4] == true){
							progress -= 10;
							progressFlagArray[4] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#email2").blur(function() {
					var obj = $("#email2");
					if(obj.val() !=""){
						if(progressFlagArray[5] != true){
							progress += 10;
							progressFlagArray[5] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[5] == true){
							progress -= 10;
							progressFlagArray[5] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
				
				$("#department").blur(function() {
					var obj = $("#department");
					if(obj.val() !=""){
						if(progressFlagArray[6] != true){
							progress += 10;
							progressFlagArray[6] = true;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}else{
						if(progressFlagArray[6] == true){
							progress -= 10;
							progressFlagArray[6] = false;
							Administry.progress("#add_user_progress", progress, 100);
						}
					}
				});
		
			
		});
		
		
		// 验证账号重复
		$(function(){
			$("#userid").blur(function(){
				
				$.post(
					"userOpt!checkUserid.do",
					{userid:$("#userid").val()},
					function(data){
					
					//&& $("#txtVerifyCode").val().test(/^[a-z]+\w{2-5}@\w+.\w+.*\w*$/)
						if(data.ok ){
							$("#checkUserid").html("");
							index=true;
						}else{
							$("#checkUserid").html("<font color='red' style='padding-left:5px;font-weight:700'>账号已被注册</font>");
							index=false;
						}
					},
					"json"
				);
			});
		});
		
		var index=false;
		function valid(){
			return  index;
		}
		</script>
	</head>

	<body>
		<%@ include file="/commons/top.jsp"%>
		<!-- Page title -->
		<div id="pagetitle">
			<div class="wrapper">
				<h1>Add User</h1>
				<s:if test="#session.login_user.permission == 1">
	 				<a href="${ctx }/pages/userInfo/add.jsp" class="btn"><span class="icon icon-add">&nbsp;</span>添加员工</a>
	 			</s:if>
			</div>
		</div>
		<!-- End of Page title -->
		
		<!-- Page content -->
		<div id="page">
			<!-- Wrapper -->
			<div class="wrapper">
					<div id="add_user_progress" class="progress full progress-green"><span><b></b></span></div>
					<!-- Left column/section -->
					<section class="column full first">					
						<form id="addUserForm" method="post" action="userOpt!addUser.do"  onsubmit="return valid()">
							<fieldset>
								<legend>添加员工信息</legend>
								
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="required" for="userid">账号：</label><span id="checkUserid"></span><br/>
										<input type="text" id="userid" class="full"  name="userid" />
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="required" for="username2">用户名：</label><br/>
										<input type="text" id="username2" class="full"  name="username"/>
										
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="" for="sexual">性别：</label><br/>
										<select id="sexual" class="full"  name="userDetail.sexual">
											<option value="0" >女</option>
											<option value="1" >男</option>
										</select>
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;clear:both;">
								<p>
									<label class="required" for="password2">密码：</label><br/>
									<input type="password" id="password2" class="full" name="password"/>
								</p>
								</div>
	
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="required" for="passwordConfirm2">确认密码：</label><br/>
										<input type="password" id="passwordConfirm2" class="full" name="passwordConfirm"/>
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="" for="mobile2">手机号码：</label><br/>
										<input type="text" id="mobile2" class="full"  name="userDetail.mobile"/>
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;clear:both;">
									<p>
										<label class="" for="email2">Email：</label><br/>
										<input type="text" id="email2" class="full"  name="userDetail.email"/>
									</p>
								</div>
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="" for="suspend">是否有登陆权限：</label><br/>
										<select id="suspend" class="full"  name="suspend">
											<option value="0" >没有</option>
											<option value="1" selected>有</option>
										</select>
									</p>
								</div>
								<div style="float:left;width:28%;margin-right:5%;">
									<p>
										<label class="" for="permission">权限：</label><br/>
										<select id="permission" class="full"  name="permission">
											<option value="1">管理员</option>
											<option value="2" selected>财务</option>
											<option value="3" >前台</option>
										</select>
									</p>
								</div>
								
								<div style="float:left;width:28%;margin-right:5%;clear:both;">
									<p>
										<label class="required" for="department">部门：</label><br/>
										<input type="text" id="department" class="full"  name="userDetail.title"/>
									</p>
								</div>
								
								<div style="clear:both;padding-top:15px;">
									<p class="box"><input type="submit" class="btn btn-green big" value="添加"/> or <input type="reset" class="btn" value="重置"/></p>
								</div>
							</fieldset>
						</form>
						
						<div class="clear">&nbsp;</div>
						
					</section>
					<!-- End of Left column/section -->
					
					
			</div>
			<!-- End of Wrapper -->
		</div>							
		<!-- End of Page content -->
		
		<!-- Page footer -->
		<%@ include file="/commons/footer.jsp"%>
		<!-- End of Page footer -->
		
		<!-- Scroll to top link -->
		<a href="#" id="totop">^ scroll to top</a>
	
		<!-- User interface javascript load -->
		<script type="text/javascript" SRC="js/administry.js"></script>
	</body>
</html>
